<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>评论</title>
    <link href="../css/reset-html5.css" rel="stylesheet">
    <link href="../css/mui.min.css" rel="stylesheet">
    <link href="../css/mui.picker.min.css" rel="stylesheet">
    <link href="../css/wx-main.css?20161028_1" rel="stylesheet">
    <script src="../js/jquery-2.2.1.min.js"></script>
    <script src="../plugins/vue/vue.min.js"></script>
    <style>
        body{
            font-size: 14px;
        }
        #btn{
            margin-top: 15px;
            margin-bottom: 15px;
            color: #ffffff;
            text-align: center;
            padding: 10px 0;
            border-radius: 10px;
            width: 90%;
            margin-left: 5%;
        }
        select{
            padding: 5px!important;
            width: 100%!important;
        }
        .mui-icon-star-filled {
            color: #fc643f;
        }
    </style>
</head>
<body class="body-bg" id="main">
<header class="text-color1">
        <span class="left-btn text-color2" onclick="history.go(-1)">
            返回
        </span>
    评价
</header>



<div class="mar-hor mar-top text-color2 pad" id="edit">
    <p class="primary-text">购机网评价</p>
    <div class="mui-content-padded">
        <div class="mui-inline">实用性</div>
        <div class="icons mui-inline" style="margin-left: 6px;" id="p1">
            <i data-index="1" class="mui-icon mui-icon-star"></i>
            <i data-index="2" class="mui-icon mui-icon-star"></i>
            <i data-index="3" class="mui-icon mui-icon-star"></i>
            <i data-index="4" class="mui-icon mui-icon-star"></i>
            <i data-index="5" class="mui-icon mui-icon-star"></i>
        </div>
    </div>
    <div class="mui-content-padded">
        <div class="mui-inline">易用性</div>
        <div class="icons mui-inline" style="margin-left: 6px;" id="p2">
            <i data-index="1" class="mui-icon mui-icon-star"></i>
            <i data-index="2" class="mui-icon mui-icon-star"></i>
            <i data-index="3" class="mui-icon mui-icon-star"></i>
            <i data-index="4" class="mui-icon mui-icon-star"></i>
            <i data-index="5" class="mui-icon mui-icon-star"></i>
        </div>
    </div>
    <div class="mui-content-padded">
        <div class="mui-inline">安全性</div>
        <div class="icons mui-inline" style="margin-left: 6px;" id="p3">
            <i data-index="1" class="mui-icon mui-icon-star"></i>
            <i data-index="2" class="mui-icon mui-icon-star"></i>
            <i data-index="3" class="mui-icon mui-icon-star"></i>
            <i data-index="4" class="mui-icon mui-icon-star"></i>
            <i data-index="5" class="mui-icon mui-icon-star"></i>
        </div>
    </div>
    <div class="cut-off-line-1" style="height: 1px"></div>
    <p class="primary-text pad-top15">维修师傅评价</p>
    <div class="mui-content-padded">
        <div class="mui-inline">服务质量</div>
        <div class="icons mui-inline" style="margin-left: 6px;" id="p4">
            <i data-index="1" class="mui-icon mui-icon-star"></i>
            <i data-index="2" class="mui-icon mui-icon-star"></i>
            <i data-index="3" class="mui-icon mui-icon-star"></i>
            <i data-index="4" class="mui-icon mui-icon-star"></i>
            <i data-index="5" class="mui-icon mui-icon-star"></i>
        </div>
    </div>
    <div class="mui-content-padded">
        <div class="mui-inline">服务态度</div>
        <div class="icons mui-inline" style="margin-left: 6px;" id="p5">
            <i data-index="1" class="mui-icon mui-icon-star"></i>
            <i data-index="2" class="mui-icon mui-icon-star"></i>
            <i data-index="3" class="mui-icon mui-icon-star"></i>
            <i data-index="4" class="mui-icon mui-icon-star"></i>
            <i data-index="5" class="mui-icon mui-icon-star"></i>
        </div>
    </div>
    <div class="mui-content-padded">
        <div class="mui-inline">服务效率</div>
        <div class="icons mui-inline" style="margin-left: 6px;" id="p6">
            <i data-index="1" class="mui-icon mui-icon-star"></i>
            <i data-index="2" class="mui-icon mui-icon-star"></i>
            <i data-index="3" class="mui-icon mui-icon-star"></i>
            <i data-index="4" class="mui-icon mui-icon-star"></i>
            <i data-index="5" class="mui-icon mui-icon-star"></i>
        </div>
    </div>
    <div class="cut-off-line-1" style="height: 1px"></div>
    <p class="primary-text pad-top15">您的评价</p>
    <textarea rows="5" id="content"></textarea>
    <div class="primary-bg text-color2" id="btn" v-on:click="do_comment()">提交评价</div>
</div>
</body>
<script src="../js/phone.js"></script>
<script src="../js/mui.min.js"></script>
<script src="../js/base.js"></script>
<script>
	alert('评论成功，正在跳转页面!');
    //应用评分
    mui('.icons').on('tap','i',function(){
        var starIndex;
        var index = parseInt(this.getAttribute("data-index"));
        var parent = this.parentNode;
        var children = parent.children;
        if(this.classList.contains("mui-icon-star")){
            for(var i=0;i<index;i++){
                children[i].classList.remove('mui-icon-star');
                children[i].classList.add('mui-icon-star-filled');
            }
        }else{
            for (var i = index; i < 5; i++) {
                children[i].classList.add('mui-icon-star')
                children[i].classList.remove('mui-icon-star-filled')
            }
        }
        starIndex = index;
    });


    var vue = new Vue({
        el:'#main',
        data:{

        },
        methods:{
            'do_comment':function(){
                var data = {};
                data.order_id = phone_getQueryString('order_id');
                data.practical = getScore($('#p1'));
                data.usability = getScore($('#p2'));
                data.security = getScore($('#p3'));
                data.quality = getScore($('#p4'));
                data.attitude = getScore($('#p5'));
                data.efficiency = getScore($('#p6'));

                if(data.practical && data.usability && data.security && data.quality && data.attitude && data.efficiency){

                }else{
                    alert('请把评分项补充完成再提交！')
                }

                data.content = $('#content').val();
                $.post('../index/index.php?m=Home&c=Order&a=addComment',data,function(res){
                    if(res.code==200){
                        alert('评论成功，正在跳转页面!');
                        setTimeout(function(){
                             location.href='order_info.html?order_id='+phone_getQueryString('order_id');
                        },2000);
                    }else{
                        alert(res.message);
                    }
                },'json');
            }

        },
        ready:function(){

        }
    });


    /**
     * 获取分数
     * @param demo
     * @returns {number}
     */
    function getScore(demo){
        var score = 0;
        demo.find('i').each(function(){
            if($(this).hasClass('mui-icon-star-filled')){
                score++;
            }
        });
        return score;
    }




</script>
</html>